<template>
    <div id="login-panel">
        <el-dialog
            title="登陆"
            :visible.sync="loginPanelVisible"
            width="20%"
            center
            @close="beforeClosePanel()">

            <LoginForm ref="loginForm" :key="refreshKey"></LoginForm>

            <span slot="footer" class="dialog-footer">
                <el-button @click="closePanel">取 消</el-button>
                <el-button type="primary" @click="login('loginForm')">登 陆</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

import LoginForm from "@/components/web/loginPanel/LoginForm";

export default {
    name: "LoginPanel",
    components: {
        LoginForm
    },
    mounted() {
        // 挂载时绑定 showLoginPanel 事件
        this.$bus.$on("showLoginPanel", flag => {
            // 接收到事件时对visible进行赋值
            this.loginPanelVisible = flag;
        })
    },
    data() {
        // 自定义el-form中表单校验

        return {
            loginPanelVisible: false,
            // 表单数据
            loginForm: {
                email: "",
                password: "",
            },
            // validateRules,
            // 用于重新渲染子组件的变量
            refreshKey: new Date().getTime()
        }
    },
    methods: {
        login() {
            this.$refs.loginForm.getFormJSON()
                .then(result => {
                    console.log("校验成功 ", result)
                })
                .catch(error => {
                    console.log("校验失败", error)
                    this.$message("校验失败")
                })
        },
        closePanel() {
            this.loginPanelVisible = false;
        },
        beforeClosePanel() {
            this.refreshKey = new Date().getTime();
        }
    }
}
</script>

<style scoped>

.el-row {
    margin-top: 35px;
    height: 85px;
}

.el-input {
    width: 220px;
}

</style>
